<script setup lang="ts">
import { getOrdersData, getTransactionData } from '@/apis/home'
import { getOrderList } from '@/apis/order'
import { getProducts } from '@/apis/product'
import LineHeader from '@/components/LineHeader.vue'
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

// 仪表数据
const countBox = ref([
  {
    title: '今日订单数',
    count: '18273',
    color: '#5B8CFF',
  },
  {
    title: '今日销售总额',
    count: '￥829392',
    color: '#5B8CFF',
  },
  {
    title: '昨日销售总额',
    count: '￥827381',
    color: '#5B8CFF',
  },
  {
    title: '近7天销售总额',
    count: '￥32456789',
    color: '#5B8CFF',
  },
])

// 商品总览
const productCountData = ref()
// 订单总览
const orderCountData = ref()
// 订单报表
const orderData = ref()
// 销售报表
const transactionData = ref()

onMounted(async () => {
  const productCountDataRes = await getProducts({
    page: 1,
    size: 100000,
  })
  productCountData.value = productCountDataRes.totalSize

  const orderCountDataRes = await getOrderList({
    page: 1,
    size: 100000,
  })
  orderCountData.value = orderCountDataRes.totalSize

  var orderChart = echarts.init(document.getElementById('order'))
  // 绘制图表
  orderChart.setOption({
    title: {
      text: '近一周订单统计',
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '2024-12-01',
        '2024-12-01',
        '2024-12-01',
        '2024-12-01',
        '2024-12-01',
        '2024-12-01',
        '2024-12-01',
      ],
    },
    yAxis: {},
    series: [
      {
        name: '订单数',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20, 20],
        areaStyle: {},
      },
    ],
  })

  var transactionChart = echarts.init(document.getElementById('transaction'))
  // 绘制图表
  transactionChart.setOption({
    title: {
      text: '近一周销售统计',
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '2024-12-01',
        '2024-12-01',
        '2024-12-01',
        '2024-12-01',
        '2024-12-01',
        '2024-12-01',
        '2024-12-01',
      ],
    },
    yAxis: {},
    series: [
      {
        name: '销售量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20, 20],
        areaStyle: {},
      },
    ],
  })

  const orderDataRes = await getOrdersData()
  orderData.value = orderDataRes.data
  orderChart.setOption({
    xAxis: {
      data: orderData.value.order_count.historical_trend.map((item: any) => item.date),
    },
    series: [
      {
        data: orderData.value.order_count.historical_trend.map((item: any) => item.amount),
      },
    ],
  })

  const transactionDataRes = await getTransactionData()
  transactionData.value = transactionDataRes.data
  transactionChart.setOption({
    xAxis: {
      data: transactionData.value.transaction_amount.historical_trend.map((item: any) => item.date),
    },
    series: [
      {
        data: transactionData.value.transaction_amount.historical_trend.map(
          (item: any) => item.amount,
        ),
      },
    ],
  })
})
</script>
<template>
  <div id="home">
    <el-container style="height: 100%">
      <el-main style="overflow-x: hidden">
        <LineHeader #text>平台首页</LineHeader>

        <div class="header-box">
          <div class="box" v-for="(item, index) in countBox" :key="item.title">
            <div class="box-left">
              <el-icon :color="item.color">
                <Tickets v-if="index == 0" />
                <Coin v-if="index == 1 || index == 2" />
                <DataLine v-if="index == 3" />
              </el-icon>
            </div>
            <div class="box-right">
              <h1>{{ item.title }}</h1>
              <h2>{{ item.count }}</h2>
            </div>
          </div>
        </div>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-card class="border">
              <template #header>
                <div class="card-header">
                  <span>商品总览</span>
                </div>
              </template>
              <div class="text-box">
                <div class="text">
                  <h1>{{ productCountData?.all }}</h1>
                  <h2>全部商品</h2>
                </div>
                <div class="text">
                  <h1>{{ productCountData?.listed }}</h1>
                  <h2>已上架</h2>
                </div>
                <div class="text">
                  <h1>{{ productCountData?.not_listed }}</h1>
                  <h2>未上架</h2>
                </div>
                <div class="text">
                  <h1>{{ productCountData?.audit }}</h1>
                  <h2>待审核</h2>
                </div>
                <div class="text">
                  <h1>{{ productCountData?.not_approved }}</h1>
                  <h2>未通过</h2>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="border">
              <template #header>
                <div class="card-header">
                  <span>订单总览</span>
                </div>
              </template>
              <div class="text-box">
                <div class="text">
                  <h1>{{ orderCountData?.all }}</h1>
                  <h2>全部订单</h2>
                </div>
                <div class="text">
                  <h1>{{ orderCountData?.confirmed }}</h1>
                  <h2>已确认</h2>
                </div>
                <div class="text">
                  <h1>{{ orderCountData?.not_confirm }}</h1>
                  <h2>未确认</h2>
                </div>
                <div class="text">
                  <h1>{{ orderCountData?.canceled }}</h1>
                  <h2>已取消</h2>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-card class="card-charts">
          <template #header>
            <div class="card-header">
              <span>订单统计</span>
            </div>
          </template>
          <div class="charts-p">
            <div class="charts-left">
              <div class="text">
                <h1>总订单数</h1>
                <h2>{{ orderData?.order_count.total_orders }}</h2>
              </div>
              <div class="text">
                <h1>今日订单数</h1>
                <h2>{{ orderData?.order_count.today_new }}</h2>
              </div>
            </div>
            <div class="charts-right">
              <div id="order" class="charts-id"></div>
            </div>
          </div>
        </el-card>

        <el-card class="card-charts">
          <template #header>
            <div class="card-header">
              <span>销售报表</span>
            </div>
          </template>
          <div class="charts-p">
            <div class="charts-left">
              <div class="text">
                <h1>总销售额</h1>
                <h2>{{ transactionData?.transaction_amount.total }}</h2>
              </div>
              <div class="text">
                <h1>今日销售额</h1>
                <h2>{{ transactionData?.transaction_amount.today }}</h2>
              </div>
            </div>
            <div class="charts-right">
              <div id="transaction" class="charts-id"></div>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>
<style scoped lang="scss">
#home {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16px 32px;
  box-sizing: border-box;
  overflow-x: hidden;

  .header-box {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .box {
      display: flex;
      width: 20%;
      height: 120px;
      background-color: #f9f9f9;
      border: 1px solid #5b8cff;
      border-radius: 8px;
      margin-top: 8px;
      margin-bottom: 32px;

      .box-left {
        width: 40%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 80px;
        border-right: 1px solid #5b8cff;
      }

      .box-right {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 60%;
        height: 100%;
        box-sizing: border-box;
      }
    }
  }

  .border {
    .text-box {
      display: flex;
      justify-content: space-around;

      .text {
        display: flex;
        flex-direction: column;
        align-items: center;

        h1 {
          color: #5b8cff;
          font-size: 48px;
        }
      }
    }
  }

  .card-charts {
    margin-top: 32px;
    .charts-p {
      display: flex;
      height: 100%;
      .charts-left {
        width: 15%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        .text {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 32px;
        }

        h2 {
          color: #5b8cff;
          font-size: 32px;
        }
      }
      .charts-right {
        width: 85%;
        height: 100%;
        .charts-id {
          width: 100%;
          height: 400px;
        }
      }
    }
  }
}
#main {
  width: 300px;
  height: 200px;
}
</style>
